<template>
    <div class="voucher">
        <div style="width: 100%; height: 2.2rem;"></div>
        <div class="voucherList" v-for="(items, id) in voucherList" :key="items.id">
             <img v-lazy="items.src" alt="">
             <span>
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prize_btn1.png" alt="" @click="getVoucher" v-show="!isReceive">
                 <img src="http://assets.rurushishi.com/activies/bgyAct/prize_btn2.png" alt="" v-show="isReceive">
             </span>
        </div>
        <p class="text">
          折扣优惠仅限部分项目使用 <br/> 具体优惠折扣以销售中心输出为准
        </p>

        <div class="writeinfo" v-show="prizeInfo.flag">
          <div class="writeinfo_warp">
            <div class="writeinfo_prizeinfo">
              “{{prize}}”
            </div>
            <div class="writeinfo_tips">填写以下信息领取优惠！</div>
            <div class="writeinfo_name" v-show="prizeInfo.prizeType==2">
              <input v-model="userWriteForm.name" type="text" placeholder="请输入您的姓名">
            </div>
            <div class="writeinfo_mobile">
              <input v-model="userWriteForm.mobile" type="text" placeholder="请输入您的手机号" @blur="blurInput" @focus="focusClick">
            </div>
            <div class="writeinfo_code">
              <div class="left">
                <input v-model="userWriteForm.code" type="text" placeholder="请输入验证码" @blur="blurInput" @focus="focusClick">
              </div>
              <div class="right">
                <div class="writeinfo_code_btn saclebtn" @click="clickCode" v-show="!showVcode">{{VerShowTxt}}</div>
                <div class="writeinfo_code_btn saclebtn" v-show="showVcode">{{counts}}s</div>
              </div>
            </div>
            <div class="writeinfo_btns">
              <div class="writeinfo_btns_ok saclebtn" @click="clickSubmit">确定</div>
              <div class="close" @click="close">关闭</div>
            </div>
          </div>
        </div>
        <Bottom :baseText="baseText"></Bottom>
        <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
            <div class="retext">返回首页</div>
        </div>
        <!-- <share :isshare="isshare"></share> -->

    </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
import {MessageBox} from "mint-ui";
//import { mapMutations } from "vuex";
//import wxsdk from "@/utils/wxsdk";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";
import * as config from "./config";
import Cookies from "js-cookie";
import utils from "@/utils/utils";
// import Share from "@/components/common/Share";
import Bottom from "@/components/common/Bottom";
import Qs from "qs";
export default {
    data(){
        return{
          registeroid:  this.$route.query.registeroid
      ? this.$route.query.registeroid
      : '', //销售中介的openid
            isFocus: false,
            reOpenid: '',
            openid: Cookies.get("openid"),
            baseText: config.BASE_TEXT,
           isReceive: false,
           ismobile:false,
           voucherList:[
               {
               id: 1,
               src: 'http://assets.rurushishi.com/activies/bgyAct/voucher1.png'
               },{
               id: 2,
               src: 'http://assets.rurushishi.com/activies/bgyAct/voucher2.png'
               },{
               id: 3,
               src: 'http://assets.rurushishi.com/activies/bgyAct/voucher3.png'
               },{
               id: 4,
               src: 'http://assets.rurushishi.com/activies/bgyAct/voucher4.png'
               }
           ],
            
            prize:'购房优惠券',
            prizeInfo:{
                prizeType: 1,
                flag: false
            },
            userWriteForm:{
                name: '',
                mobile: '',
                code: ''
            },
            timer: null,
            VerShowTxt: '获取验证码',
            showVcode: false,
            counts: '',
        }
    },

     components: {
        Bottom
    },

    methods:{
         //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
        },

        focusClick(e) {
                this.isFocus = true;
                if (utils.browser.versions.ios) {
                    setTimeout(function () {
                        e.target.scrollIntoView(true);
                    }, 100);
                }
        },
        blurInput(e) {
                this.isFocus = false;
                this.$nextTick(() => {
                    if (utils.browser.versions.ios && !this.isFocus) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
        },

        //是否填写手机号
        isgetMobile(){
           let _self = this;
        let query = {
                          activityId: config.ACT_CODE,
                          openid: Cookies.get("openid"),
                        //   name: _self.userWriteForm.name
                        };
                        axios
                            .get(
                              `${_self.global.API_FORUM_URL}/api/activity/getMobile?${Qs.stringify(
                                query
                              )}`,
                              {}
                            ) .then(response => {
                              if(response.code==0 ){
                                  // _self.prizeInfo.flag=true; 
                                  if(response.mobile!=null){
                                    _self.userWriteForm.mobile = response.mobile
                                      _self.ismobile =true;
                                  }else{
                                    _self.ismobile =false;
                                 }
                                  
                              }
                            })  

        },

        //领取优惠券
        getVoucher(){
            let _self = this;
             if(_self.ismobile){
               if(_self.registeroid){
                  _self.andBindRegister(_self.userWriteForm.mobile);
                }
                 let query = {
                                    activityId: config.ACT_CODE,
                                    couponsId: 24,
                                    mobile:  _self.userWriteForm.mobile,
                                    openId: _self.openid
                                    //   name: _self.userWriteForm.name
                                    };
                                    axios
                                        .post(
                                        `${_self.global.API_FORUM_URL}/api/activity/getCoupons?${Qs.stringify(
                                            query
                                        )}`,
                                        {}
                                        )
                                        .then(response => {
                                        if(response.code==0){
                                          MessageBox.alert(
                                              "领取成功！",
                                              "购房优惠"
                                          ).then(() => {
                                            // _self.isReceive = true;
                                            // _self.prizeInfo.flag = false;
                                              _self.$nextTick(() => {
                                                 _self.isReceive = true;
                                                  _self.prizeInfo.flag = false;
                                              });
                                          });
                                            //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                                        }
                                        });       
            }else{
              _self.prizeInfo.flag=true; 
            }
                    // let query = {
                    //       activityId: config.ACT_CODE,
                    //       openid: Cookies.get("openid"),
                    //     //   name: _self.userWriteForm.name
                    //     };
                    //     axios
                    //         .get(
                    //           `${_self.global.API_FORUM_URL}/api/activity/getMobile?${Qs.stringify(
                    //             query
                    //           )}`,
                    //           {}
                    //         )
                    //         .then(response => {
                    //           if(response.code==0 && !response.mobile){
                    //               _self.prizeInfo.flag=true; 
                    //           }else{
                     
                                  // let query = {
                                  //   activityId: config.ACT_CODE,
                                  //   couponsId: 24,
                                  //   // mobile: response.mobile,
                                  //   openId: _self.openid
                                  //   //   name: _self.userWriteForm.name
                                  //   };
                                  //   axios
                                  //       .post(
                                  //       `${_self.global.API_FORUM_URL}/api/activity/getCoupons?${Qs.stringify(
                                  //           query
                                  //       )}`,
                                  //       {}
                                  //       )
                                  //       .then(response => {
                                  //       if(response.code==0){
                                  //         MessageBox.alert(
                                  //             "领取成功！",
                                  //             "购房优惠"
                                  //         ).then(() => {
                                  //           // _self.isReceive = true;
                                  //           // _self.prizeInfo.flag = false;
                                  //             _self.$nextTick(() => {
                                  //                _self.isReceive = true;
                                  //                 _self.prizeInfo.flag = false;
                                  //             });
                                  //         });
                                            //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                                        // }
                                        // });

                                        // }
                            // });           

        },
    //点击确认 //领取优惠券
    clickSubmit(){
        let _self = this;
        if (!_self.userWriteForm.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.userWriteForm.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
                }
                 if (!_self.userWriteForm.code) {
                    return MessageBox.alert("请输入验证码", "提示");
                }
                // else{
                //     _self.userWriteForm.code.substring(0,4) //截取前6位字符
                // }
                if(_self.registeroid){
                  _self.andBindRegister(_self.userWriteForm.mobile);
                }
                let query = {
                          activityId: config.ACT_CODE,
                          couponsId: 24,
                          mobile: _self.userWriteForm.mobile,
                          code: _self.userWriteForm.code,
                          openId: _self.openid
                        //   name: _self.userWriteForm.name
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getCoupons?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                MessageBox.alert(
                                              "领取成功！",
                                              "购房优惠"
                                          ).then(() => {
                                            // _self.isReceive = true;
                                            // _self.prizeInfo.flag = false;
                                              _self.$nextTick(() => {
                                                 _self.isReceive = true;
                                                  _self.prizeInfo.flag = false;
                                              });
                                          });
                                // _self.isReceive = true
                                //  _self.$router.push({path:"./main",query:{channel:_self.channel}});
                              }
                            });
    },
    //获取手机验证码
            getActPhoneVCode(){
                const _self = this;
                if(!_self.userWriteForm.mobile){
                        return MessageBox.alert("请输入手机号", "提示");
                    }else{
                      let query = {
                          activityId: config.ACT_CODE,
                          mobile: _self.userWriteForm.mobile
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/getSmsCode?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              console.info(response)
                              if(response.code==0){
                                
                              }
                            });
                    };
            },

            clickCode(){
                const _self = this;
                const TIME_COUNT = 60;
                _self.getActPhoneVCode();
                if(!_self.timer&&_self.userWriteForm.mobile){
                    _self.counts = TIME_COUNT;
                    _self.showVcode = true;
                    _self.timer = setInterval(()=>{
                        if(_self.counts>0&&_self.counts<=TIME_COUNT){
                            _self.counts--;
                        }else{
                            _self.showVcode = false;
                            _self.VerShowTxt = '重新获取';
                            clearInterval(_self.timer);
                            _self.timer = null;
                        }
                    },1000)
                }
              
            },
            // 销售中介提交手机号要调用的接口
    andBindRegister(mobile) {
                let _self = this;
                request
                    .get(_self.global.API_URL, {
                        action: "/hb/HbUserAction/addUserInfoWithPhoneAndBindRegister",
                        requestParam: {
                            registeroid: _self.registeroid,
                            obj:{
                              // name: '',
                              openid: Cookies.get("openid"),
                              mobile:mobile,
                            }
                        }
                    })
                    .then(response => {

                    });
    },        
            close() {
               this.prizeInfo.flag=false;

                // _self.$router.push({path:"./main",query:{channel:_self.channel}});
            },

    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    })

    
  },
  computed: {
    ...mapState(["info", "channel"])
  },
  created(){
     this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);

       const _self = this
          _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            // _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
            // _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid;
            // config.initShare();
             request
                    .get(_self.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          
                        }
                    })
                    .then(response => {
                        _self.setInfo(response.obj.user);
                        // console.log(response.obj.salerOrAgent);
                        if(response.obj.salerOrAgent){
                          _self.registeroid=response.obj.user.openid
                          //  _self.registeroid = Cookies.get("openid")
                        }
                        // console.log(_self.info);
                        if (_self.info && _self.info.nickname && _self.info.nickname != '') {
                            _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
                        }
                        _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid+'&registeroid='+_self.registeroid;
                    });
            // _self.global.SHARE_TITLE = _self.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
            // _self.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + _self.channel + '&reOpenid=' + _self.openid;
            config.initShare();
  },
  mounted(){
    this.isgetMobile()
   
      //是否领取过优惠券
      let _self = this;
      let query = {
                          activityId: config.ACT_CODE,
                          couponsId: 24,
                          openId: Cookies.get("openid")
                        
                        };
                        axios
                            .post(
                              `${_self.global.API_FORUM_URL}/api/activity/checkCoupons?${Qs.stringify(
                                query
                              )}`,
                              {}
                            )
                            .then(response => {
                              if(response.code==0){
                                 if(response.data==1){
                                     _self.isReceive = true;
                                 }
                              }
                            });

      
  }
}
</script>
<style lang="stylus" scoped>
.voucher{
    width 100%
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background url(http://assets.rurushishi.com/activies/bgyAct/purchaseBg.jpg) no-repeat
    background-size 100% 100%
}
.voucherList{
    width 6.27rem
    height 1.55rem
    margin 0 auto
    background url(http://assets.rurushishi.com/activies/bgyAct/pframe.png) no-repeat
    background-size 100% 100%
    display flex
    justify-content center
    line-height 1.55rem
    vertical-align middle
}
.voucherList>img{
    width 3.3rem
    height 1.1rem
    margin .22rem 0
    padding 0 .6rem
}
.voucherList>span{
   width: 2rem;
  height: 1.55rem;
  font-size: 0.24rem;
  vertical-align: middle;
  text-align: center;
  line-height 1.55rem
}
.voucherList>span>img{
    width 1.06rem
    height .33rem
}
.return{
    position absolute
    bottom: 1.2rem
    right 0
    width: 1.2rem
    text-align center
    vertical-align middle
}
.return>img{
    width: .81rem
    // width: 100%
    height: .81rem
}
.retext{
  line-height .5rem
  font-size .24rem
  color #fff
}
.text{
  width  80%
  line-height .5rem
  padding .5rem 0
  color #fff
  font-size .28rem
  text-align center
  margin 0 auto
}

.writeinfo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index 20
}


.writeinfo_warp {
  position: relative;
  width: 80%;
  background-color: blue;
  background: url('http://assets.rurushishi.com/activies/bgyAct/msg.png') repeat center center;
  background-size: 100% 100%;
  padding: 1.2rem 0;
}

.writeinfo_warp >div {
  margin-top: 0.3rem;
}

// .writeinfo_bg {
// position: absolute;
// }

// .writeinfo_bg img {
// width: 100%;
// }
.writeinfo_prizeinfo {
  margin-top: 0rem !important;
  width: 80%;
  margin 0 auto
  text-align: center;
  font-size: 0.28rem;
  color: #ffffff;
}

.writeinfo_tips {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.writeinfo_name {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_name input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_mobile {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
}

.writeinfo_mobile input {
  border-radius: 0.3rem;
  width: 80%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code {
  width: 80%;
  margin: 0.2rem auto 0 auto;
  display: flex;
}

.writeinfo_code input {
  border-radius: 0.3rem;
  width: 100%;
  height: 0.6rem;
  text-indent: 0.3rem;
  border-color: #eee1a9;
}

.writeinfo_code .writeinfo_code_btn {
  border-radius: 0.3rem;
  min-width: 1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  margin-left: 10%;
  background-color: #ffb53b;
  padding: 0 0.1rem;
}

.writeinfo_btns {
  margin-top: 0.2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.writeinfo_btns .writeinfo_btns_ok {
  width: 30%;
  margin-right 10%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
.writeinfo_btns .close{
  width: 30%;
  height: 0.6rem;
  line-height: 0.6rem;
  background-color: #ffb53b;
  border-radius: 0.3rem;
}
</style>


